import React, {Component} from 'react';
//这里是一个高阶组件，返回的也是一个组件,对传入的组件进行一定的处理
const Loadable = ({
    loader,
    loading:Loading
    }) => {
    return class LoadableComponent extends  Component {
        state = {
            LoadedComponent: null
        }
        componentDidMount() {
            //import('./Dashboard')  执行loader时执行的是这句话
            loader()
                .then(res => {
                    // console.log(res.default)   此处获取到的是组件
                    this.setState({
                        LoadedComponent: res.default
                    })
                })
        }
        render() {
            const {
                LoadedComponent
            } = this.state
            return (
                LoadedComponent
                    ?
                <LoadedComponent/>
                :
                <Loading />
            )
        }
    }
}

export default Loadable;  //导出一个高阶组件